import React, { useState } from "react";
import axios from "axios";
import "./TaskModal.css";

const TaskModal = ({ onClose, onSubmit }) => {
  const [formData, setFormData] = useState({
    id: +1,
    taskName: "",
    startDate: "",
    endDate: "",
    status: "待处理",
    category: "UI设计",
    assignee: "小张",
    description: "",
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const submitData = {
      id: formData.id,
      title: formData.taskName,
      status: formData.status,
      time: formData.startDate,
      yugu: "2天",
      category: formData.category,
      assignee: formData.assignee,
    };

    try {
      const response = await axios.post(
        "http://192.168.0.154:3000/my/list",
        submitData
      );
      if (response.status === 200) {
        onSubmit(submitData);
        onClose();
      }
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <div className="modal-header">
          <h2>添加任务</h2>
          <button className="close-btn" onClick={onClose}>
            ×
          </button>
        </div>

        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label>任务名称</label>
            <input
              type="text"
              name="taskName"
              value={formData.taskName}
              onChange={handleChange}
              placeholder="整架+注册UI设计"
            />
          </div>

          <div className="form-group">
            <label>开始日期</label>
            <input
              type="date"
              name="startDate"
              value={formData.startDate}
              onChange={handleChange}
            />
          </div>

          <div className="form-group">
            <label>结束日期</label>
            <input
              type="date"
              name="endDate"
              value={formData.endDate}
              onChange={handleChange}
            />
          </div>

          <div className="form-group">
            <label>任务类型</label>
            <select
              name="category"
              value={formData.category}
              onChange={handleChange}
            >
              <option value="UI设计">UI设计</option>
              <option value="开发">开发</option>
              <option value="测试">测试</option>
            </select>
          </div>

          <div className="form-group">
            <label>负责人</label>
            <select
              name="assignee"
              value={formData.assignee}
              onChange={handleChange}
            >
              <option value="小张">小张</option>
              <option value="小李">小李</option>
              <option value="小王">小王</option>
            </select>
          </div>
          <div className="form-group">
            <label>进度</label>
            <select
              name="status"
              value={formData.status}
              onChange={handleChange}
            >
              <option value="未开始">未开始</option>

              <option value="已完成">已完成</option>
            </select>
          </div>

          <div className="form-group">
            <label>任务描述</label>
            <textarea
              name="description"
              value={formData.description}
              onChange={handleChange}
              placeholder="请输入任务描述"
            />
          </div>

          <div className="form-buttons">
            <button type="submit" className="submit-btn" onClick={onClose}>
              保存
            </button>
            <button type="button" className="cancel-btn" onClick={onClose}>
              取消
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default TaskModal;
